import { ScrollSup } from '@/shared/ui/Sup';

import { NumberedItem } from './NumberedItem';
import cs from './NumberedList.module.scss';

const list = [
  {
    id: 1,
    body: (
      <p>
        Для нормального усвоения новой еды пищеварительный тракт ребенка должен быть готов: появляются необходимые для
        переваривания ферменты, совершенствуется кишечник
        <ScrollSup number={2} />, налаживается местный иммунитет, затухают рефлексы выталкивания пищи языком.
        Своевременное введение прикорма — профилактика заболеваний ЖКТ в&nbsp;будущем.
      </p>
    ),
  },
  {
    id: 2,
    body: (
      <p>
        Важна и психоэмоциональная готовность малыша: к 4–6 месяцам у ребенка появляется пищевой интерес. Его
        поддержание, а также спокойное, поэтапное введение прикорма поможет выстроить правильные пищевые привычки.
      </p>
    ),
  },
  {
    id: 3,
    body: (
      <p>
        Физическая безопасность. Вводить «взрослую» еду стоит тогда, когда ребенок уже пытается самостоятельно сесть,
        т.е. как раз примерно в этот возрастной период. Так мы&nbsp;снижаем риски поперхивания и срыгивания.
      </p>
    ),
  },
];

export const NumberedList1 = () => (
  <div className={cs.list}>
    <h3 className={cs.strong}>Но почему так? Вот лишь несколько причин</h3>
    <ol className={cs.ol}>
      {list.map(({ id, body }) => (
        <NumberedItem className={cs.item} color="#9969FF" key={id} number={id}>
          {body}
        </NumberedItem>
      ))}
    </ol>
  </div>
);
